דלג לתוכן הראשי

Reactive Forms

Reactive Forms נותנים לנו אפשרות שליטה גדולה יותר וגמישות בבניית טפסים. מבנה הטופס מוגדר בתוך קובץ ה-ts.

  1. מגדירים את הטופס בתוך קובץ ה-ts.
  2. מוסיפים ולידציות.
  3. מחברים את הגדרת הטופס לטופס ב-html.

כדי להשתמש ב-reactive forms צריך לייבא אותם ל-app module.

app.module.ts
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

הגדרת טופס Reactive Form

גם לקומפוננטה צריכים לייבא את רכיבי הטפסים.

formComponent.ts
import { FormGroup, FormControl } from '@angular/forms';

loginReactiveForm: FormGroup = new FormGroup({
user: new FormControl(''),
password: new FormControl(''),
});

אפשר גם לתת ערך ברירת מחדל לשדה בטופס.

formComponent.ts
category: new FormControl('Papers');

אחרי שמגדירים את הטופס צריך לחבר אותו לטופס בקובץ ה-html. נשתמש ב-ngSubmit כדי להגדיר את הפונקציה שתופעל בזמן שליחת הטופס.

formComponent.html
<div class="container">
<h1 class="mb-4">Reactive forms</h1>
<form [formGroup]="loginReactiveForm" (ngSubmit)="loginUser()">
<input type="text" formControlName="user" placeholder="Enter name"/>
<br /><br />
<input type="password" formControlName="password" placeholder="Enter password"/>
<br /><br />
<button>Login</button>
</form>
</div>

את הפונקציה נפעיל מתוך ה-class.

formComponent.ts
loginUser() {
console.log(this.loginReactiveForm.value);
}

Form validation

כדי להשתמש בולידציות צריך לייבא אותן.

formComponent.ts
import { FormGroup, FormControl, Validators } from '@angular/forms';

loginReactiveForm = new FormGroup({
user: new FormControl('', [Validators.required]),
password: new FormControl('', [
Validators.required,
Validators.minLength(6),
]),
});

אפשר להשתמש בולידטורים שונים כמו: required, min, max, email, minLength, maxLength.

אם שדה לא עבר את הולידציה, נרצה לשנות את העיצוב שלו כך שהשגיאה תבלוט למשתמש.

formComponent.css
input.ng-invalid.ng-touched{

}

כדי להראות את השגיאות נשתמש בפונקציית get לקבל את השדה של הטופס:

formComponent.ts
get user() {
return this.loginReactiveForm.get('user');
}
get password() {
return this.loginReactiveForm.get('password');
}

עכשיו אפשר להראות את השגיאות בטופס ה-html.

formComponent.html
<form [formGroup]="loginReactiveForm" (ngSubmit)="loginUser()">
<input type="text" formControlName="user" placeholder="Enter name" />
<br /><br />

<div
class="alert alert-danger"
role="alert"
*ngIf="user && user.invalid && user.touched">
The user name is not valid.
</div>

<br />

<input
type="password"
formControlName="password"
placeholder="Enter password"/>

<br /><br />

<div
class="alert alert-danger"
role="alert"
*ngIf="password && password.invalid && password.touched">
The password is not valid.
</div>

<br />
<button [disabled]="loginReactiveForm.invalid">Login</button>
</form>

Form group

אפשר לקבץ כמה שדות אחת קבוצה אחת. מגדירים container לקבוצה ושמים בתוכו את השדות הרצויים.

comp.html
<form [formGroup]="contactForm" (ngSubmit)="onContactSubmit()">
<div formGroupName="presonalDetails">
<input type="text" formControlName="firstName">
<input type="text" formControlName="lastName">
<input type="text" formControlName="email">
<span *ngIf="!contactForm.get('presonalDetails.email')">Enter a valid email.</span>
</div>

<input type="text" formControlName="message">
</form>

מבנה של טופס פשוט:

comp.ts
contactForm: FormGroup = new FormGroup({
firstName: new FormControl(''),
lastName: new FormControl(''),
email: new FormControl(''),
message: new FormControl(''),
});

מבנה של טופס עם קבוצה.

comp.ts
contactForm: FormGroup = new FormGroup({
presonalDetails: new FormGroup({
firstName: new FormControl(''),
lastName: new FormControl(''),
email: new FormControl(''),
}),

message: new FormControl(''),
});

Form array

אפשר להוסיף מערכים לטופס באנגולר על ידי FormArray. נגדיר את subjects כמערך וכל פעם כשנוסף נושא בטופס נכניס אותו לתוך המערך.

comp.ts
contactForm: FormGroup = new FormGroup({
presonalDetails: new FormGroup({
firstName: new FormControl(''),
lastName: new FormControl(''),
email: new FormControl(''),
}),
message: new FormControl(''),
subjects: new FormArray([
new FormControl(null),
])
});

addSubject(){
(<FormArray>this.contactForm.get('subjects')).push(new FormControl(null));
}
comp.html
<form [formGroup]="contactForm" (ngSubmit)="onContactSubmit()">
<div formGroupName="presonalDetails">
<input type="text" formControlName="firstName" />
<input type="text" formControlName="lastName" />
<input type="text" formControlName="email" />
<span *ngIf="!contactForm.get('presonalDetails.email')"
>Enter a valid email.</span
>
</div>
<input type="text" formControlName="message" />
<div formArrayName="subjects">
<ng-container
*ngFor="let subject of contactForm.get('subjects')['controls']; index as i"
>
<input type="text" placeholder="add subject..." formControlName="{{ i }}"/>
</ng-container>
<button (click)="addSubject()">Add subject</button>
</div>
</form>

אפשר ליצור ולידציות גם למערך.

comp.ts
(<FormArray>this.contactForm.get('subjects')).push(new FormControl(null, Validators.required));